$(function(){
//todo write my js code at here

    loadStudentList();

});

function loadStudentList(){
    $.ajax({

        url:"/api/student/list"

    }).done(function (data){

        // console.log(data)
        let html="";
        data.forEach((element, index) => {
            html+="<tr>"

            html+="<td>"+element.id+"</td>"
            html+="<td>"+element.name+"</td>"
            html+="<td>"+element.password+"</td>"
            html+="<td>"+element.sex+"</td>"
            html+="<td>"+element.age+"</td>"
            html+="<td>"+element.sno+"</td>"

            html+="<td> <a href='#' onclick='showStudentDlg("+element.id+
                ")' class='xuantys'>编辑</a> &nbsp;&nbsp;<a href='#' onclick='deleteById("+
                element.id+")' class='xuantys'>删除</a></td>"

            html+="</tr>"
        })
        $("#studentTb").html(html)

    });

}

let layerIndex;
/**
 * 弹出学生信息新增/更改对话框
 */
function showStudentDlg(id){
    let title="新增学生"
    if(id){
        //id存在是编辑
        title="编辑学生"
        $("#formId").css("display","block");
        //读取学生信息并赋值
        $.ajax({
            url:"/api/student/"+id,
            method:"GET"
        }).done(result=>{
            console.log(result)
            //遍历 result 对象并将值填充到 #studForm 表单中
            $.each(result,function(key, value){
                // 修改选择器，确保选择的是 #studForm 内的字段
                var field = $('#studForm [name="' + key +'"]')
                if(field.is(':radio')){
                    field.filter('[value="' + value +'"]').prop('checked',true); // 选中对应的单选按钮
                }else if(field.is(':checkbox')){
                    field.prop('checked',value === "yes"); // 选中复选框
                }else {
                    field.val(value); // 填充文本框或其他字段
                }
            })
        })

    }else{
        //id不存在是新增
        $("#studForm")[0].reset();
        $("#formId").css("display","none");
    }
    layerIndex = layer.open({
        type: 1,
        title:title,
        area: ['520px','auto'],
        content: $('#studForm') //捕获层
    })
}

layui.use(function () {
    //（1）验证表单是否合法
    layui.form.on('submit(stud-dlg)', function(data) {
        event.preventDefault(); // 阻止表单默认提交

        commitStuDlg();
    })
});

function commitStuDlg(){
    let id=$("#id").val();
    let formData = $("#studForm").serialize(); // 获取表单数据

    if(id!=null && id!=""){
        // 是更新学生
        //（2）将表单内容发送到服务器insert中，把提交列表变灰不能使用
        $.ajax({
            url:"/api/student/update",
            method:"PUT",
            data:formData
        }).done(result => {
            console.log(result);
            if(result.id){

                //（4）读取并刷新原来的学生列表
                loadStudentList();

                //（3）关闭弹出层
                console.log("更新成功！")
                if(layerIndex)
                    layer.close(layerIndex)

            }
        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("提交失败：" + textStatus + " - " + errorThrown);
            //可以在这里处理错误逻辑
            alert("操作失败，请重试！")
        });
    }else {
        //新增学生需要进行
        //新增学生
        //（2）将表单内容发送到服务器insert中，把提交列表变灰不能使用
        $.ajax({
            url:"/api/student/add",
            method:"POST",
            data:formData
        }).done(result => {
            console.log(result);
            if(result.id){

                //（4）读取并刷新原来的学生列表
                loadStudentList();

                //（3）关闭弹出层
                console.log("添加成功！")
                if(layerIndex)
                    layer.close(layerIndex)

            }
        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("提交失败：" + textStatus + " - " + errorThrown);
            //可以在这里处理错误逻辑
            alert("操作失败，请重试！")
        });
    }

    $("#btnOk").prop("disabled",true).addClass("layui-btn-disabled"); // 禁用按钮

}

function deleteById(id){
    // 删除
    layer.confirm('你真的要删除吗？一旦删除，不可恢复！', {icon: 3}, function(){

        $.ajax({
            url:"/api/student/delete/"+id,
            method:"DELETE"
        }).done(result=>{
            loadStudentList();
        })
        layer.closeAll(); // 关闭所有层（包括确认框）
    }, function(){

    });
}